<template>
	<!-- 首页 -->
	<view class="page" v-if="type!='机构'">
		<view class="carousel">
			<swiper class="scroll-view_H" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in carouselList" :key="index" class="carousel_item">
					<view class="carousel_item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="index_title">
			<text>每日一推</text>
		</view>
		<view class="list">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view class="list_item" v-for="(item,index) in dailyList" :key="index" @click="jumpToVideo(item)" v-if="item.recommended">
					<view class="list_head">
						<image :src="item.imageUrl"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="index_title" >
			<text>附近的机构</text>
			<text style="float: right;margin-right: 24rpx;color: #999999;font-size: 24rpx;line-height: 45rpx;" @click="jumpToInstitution()">更多></text>
		</view>
		<view class="institutionList" v-for="(item,index) in institutionList" :key="index">
			<view class="institution_title">
				{{item.institution}}
			</view>
			<view class="institution_logo">
				<image :src="item.avatarUrl" mode=""></image>
			</view>
			<view class="institution_info">
				<view class="institution_content">
					{{item.insIntroduction}}
				</view>
				<view class="institution_more">
					<p style="text-align: right;padding-right: 14rpx;height: 50rpx;line-height: 50rpx;">
						<text class="more" @click="jumpToMore(item._id)">了解详情</text>
						<!-- <button type="default" size="mini" style="margin-right:14rpx;font-size: 14rpx;color: #666666;">了解详情</button> -->
					</p>
					<view>
						<view style="width: 200rpx;float: left;">
							<p>{{item.phone}}</p>
							<!-- <p>{{item.startTime}} - {{item.endTime}}</p> -->
						</view>
						<view style="width: 200rpx;float: right;">
							<button class="addButton" hover-class="button-hover" type="default" size="mini"
								@click="addInstitution(item)">加入</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 运营页面 -->
	<view class="page" v-else>
		<!-- 账单管理 -->
		<view style="display: flex; flex-direction: row;">
			<view class="new_bills">
				<view class="new_bill_select" v-for="(item,index) in billList" :key="index" @click="jumpTo(item.index)">
					<view class="bill_logo">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="new_bill_info">
						<text style="font-size: 26rpx; color: #555555;">{{item.type}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 课酬管理 -->
		<view class="title" v-if="teacherList.length > 0">
			<text>课酬管理</text>
			<text style="float: right;margin-right: 24rpx;color: #FD973F;font-size: 24rpx;line-height: 45rpx;"
				@click="jumpToTeacher()">
				查看全部
			</text>
		</view>
		<view style="display: flex; flex-direction: row; flex-wrap: wrap; margin-left: 30rpx;">
			<view class="teacher_select" v-for="(item, index) in teacherList" :key="index">
				<view style="display: flex; flex-direction: column;" @click="junToTeacherWage(item)">
					<view class="teacher_logo">
						<image :src="item.avatarUrl" mode=""></image>
					</view>
					<view class="teacher_info">
						<text style="font-size: 20rpx; color: #313450;">{{item.realName}}</text>
						<text style="font-size: 18rpx; color: #898A8F;" v-for="(item, index) in item.classList" :key="index">{{item.name}}</text>
					</view>
					<view class="teacher_evaluate">
						<image src="../../static/evaluate.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<text>全部课程</text>
			<text style="float: right;margin-right: 24rpx;color: #FD973F;font-size: 24rpx;line-height: 45rpx;"
				@click="jumpToCourseAll()">
				查看更多
			</text>
		</view>
		<!-- 全部课程 -->
		<scroll-view scroll-x="true" style="white-space: nowrap;" enable-flex="true">
			<view style="display: flex; margin-left: 30rpx;">
				<view class="course_select" v-for="(item, index) in courseList" :key="index" @click="jumpToPrice(item)">
					<view style="display: flex; flex-direction: column;">
						<view class="course_logo">
							<image :src="item.imageUrl" mode=""></image>
						</view>
						<view style="display: flex; flex-direction: column;">
							<text style="font-size: 20rpx; color: #313450;">{{item.name}}</text>
							<text style="font-size: 18rpx; color: #898A8F;">点击设置课程单价</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	let that;
	export default {
		data() {
			return {
				type: '',
				// 轮播图列表
				fileList: [
					"cloud://inspace-v1.696e-inspace-v1-1302892928/carousel/carousel1.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/carousel/carousel2.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/carousel/carousel3.jpg"
				],
				// 每日一推列表
				dailyFile: ["cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course1.png",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course2.png",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course4.png",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course3.png",
				],
				// 轮播图
				carouselList: [],
				// 每日一推
				dailyList: [],
				// 附近的机构
				institutionList: [],

				// 轮播图需要
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 滑块需要
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 运营页面
				billList: [{
						index: 0,
						type: '记账明细',
						// date: '三月',
						img: '../../static/myHomework.png'
					},
					{
						index: 1,
						type: '收支统计',
						// date: '明细',
						img: '../../static/attendance.png'
					},
					// {
					// 	index: 2,
					// 	type: '支出',
					// 	date: '三月',
					// 	img: '../../static/expenses.png'
					// }
					
				],
				teacherList: [],
				courseList: [{
						index: 0,
						name: '汤普森简易钢琴教程',
						avatar: 'cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course1.png'
					},
					{
						index: 1,
						name: '古筝初级教程',
						avatar: 'cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course2.png'
					},
					{
						index: 2,
						name: '复古音乐教程',
						avatar: 'cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/每日一推/course3.png'
					},
				]
			}
		},
		onLoad() {
			that = this;
			// 获取所有课程
			that.getCourse();
		},
		onShow() {
			this.type = getApp().globalData.userInfo.type;
			// 获取老师
			if(this.type == '机构') {
				that.getTeacher();
			}
		},
		created() {
			this.getInstitution();
			this.getUrl();
			// this.getDailyUrl();
		},
		onShareAppMessage() {
			name: '快学音乐'
		},
		methods: {
			getCourse: function() {
				that.dailyList = [];
				db.collection('course').where({
					status: '已发布'
				}).get().then(res=>{
					that.courseList = res.data;
					// 获取图片链接
					res.data.forEach(item=>{
						if(item.recommended == true) {
							that.dailyList.push(item);
						}
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							if(res.fileList[0].tempFileURL){
								item.imageUrl = res.fileList[0].tempFileURL;
							}
						});
					})
				})
			},
			getTeacher: function() {
				// 获取所有老师
				db.collection('user').where({
					institutionId: getApp().globalData.userInfo.institutionId,
					type: '教师'
				}).get().then(res=>{
					console.log(res);
					// that.teacherList = res.data;
					// 获取老师的班级
					res.data.forEach(item=>{
						// 获取机构的班级
						db.collection('class').where({
							institutionId: getApp().globalData.userInfo.institutionId,
							teacher: item.openId
						}).get().then(res=>{
							if(res.data.length > 0){ 
								item.classList = res.data;
								that.insert(that.teacherList, item);
							} 
						})
					})
				})
			
			},
			insert: function(arr, param){
				let flag = false;
				// 遍历数组，判断该元素是否存在
				arr.forEach(item => {
					if(item._id == param._id) {
						// 存在
						flag = true;
					}
				})
				if(!flag) {
					// 不存在则保存
					that.teacherList.push(param);
				}
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			getInstitution: function() {
				cloudbase.database().collection('institution').get().then(res => {
					// console.log(res);
					// console.log(res.data);
					let list = res.data;
					// console.log(list.length);
					if (list.length != 0) {
						let bufferList = [];
						list.forEach(v => {
							if (v.auth == true) {
								if (!v.avatarUrl) {
									v.avatarUrl = 'cloud://inspace-v1.696e-inspace-v1-1302892928/institutionImage/logo2.png'
								}
								cloudbase.getTempFileURL({
									fileList: [v.avatarUrl]
								}).then(res => {
									let list = res.fileList[0];
									v.avatarUrl = list.tempFileURL ? list.tempFileURL : v.avatarUrl;
									bufferList.push(v);
								})
							}
						})
						this.institutionList = bufferList;
					}
				})
			},

			getUrl: function() {
				let that = this;
				// that.insInformation.imageUrl = [];
				cloudbase.getTempFileURL({
					fileList: that.fileList
				}).then(res => {
					// console.log(res);
					let list = res.fileList;
					list.forEach(v => {
						that.carouselList.push(v.tempFileURL);
					})
					// console.log(that.carouselList)
				})
			},
			getDailyUrl: function() {
				let that = this;
				cloudbase.getTempFileURL({
					fileList: that.dailyFile
				}).then(res => {
					let list = res.fileList;
					list.forEach(v => {
						that.dailyList.push(v.tempFileURL);
					})
				})
			},
			addInstitution: function(item) {
				let that = this;
				if (getApp().globalData.userInfo.openId != '') {
					console.log('加入机构')
					uni.showModal({
						title: '提示',
						content: '确定要加入该机构吗',
						success(res) {
							if(res.confirm){
								// 这里不应该直接修改用户的机构信息
								// that.changeInstitution(item);
								// 进行审核判断
								that.sendAudit(item);
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			sendAudit: function(item) {
				db.collection('audit').add({
					openId: getApp().globalData.userInfo.openId,
					name: getApp().globalData.userInfo.realName,
					type: 'join',
					institutionId: item._id,
					finish: false
				}).then(res => {
					console.log(res);
					uni.navigateTo({
						url: '../submitSuccess/submitSuccess?index=0'
					})
				})
			},
			changeInstitution: function(item){
				let openId = getApp().globalData.userInfo.openId;
				// console.log(openId);
				// console.log(item)
				db.collection('user').where({
					openId: openId
				}).update({
					institutionId: item._id,
					institution: item.name
				}).then(res=>{
					console.log(res);
					if(res.updated == 1){
						// 修改全局变量
						getApp().globalData.userInfo.institutionId = item._id;
						getApp().globalData.userInfo.institution = item.name;
						uni.navigateTo({
							url: '../submitSuccess/submitSuccess?index=0'
						})
					}
				})
			},
			jumpToMore: function(e) {
				if (getApp().globalData.userInfo.openId != '') {
					uni.navigateTo({
						url: '../institutionMore/institutionMore?id=' + e
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}

			},
			jumpToInstitution: function() {
				if (getApp().globalData.userInfo.openId != '') {

					uni.navigateTo({
						url: '../institution/institution?type=index'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			jumpToVideo: function(item) {
				if (getApp().globalData.userInfo.openId != '') {
					uni.navigateTo({
						url: '../video/video?item=' + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			// 机构端
			jumpTo: function(type) {
				if (getApp().globalData.userInfo.openId != '') {
					switch (type) {
						case 0:
							uni.navigateTo({
								url: "../billDetailNew/billDetailNew"
							})
							break;
						case 1:
							uni.navigateTo({
								url: "../institutionMine/institutionMine"
							})
							break;
					}
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			jumpToPrice: function(item) {
				// console.log(item)
				if (getApp().globalData.userInfo.openId != '') {

					uni.navigateTo({
						url: "../coursePricing/coursePricing?item=" + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			jumpToTeacher: function() {
				if (getApp().globalData.userInfo.openId != '') {
					uni.navigateTo({
						url: '../teacherAll/teacherAll?teacherList=' + JSON.stringify(that.teacherList)
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			jumpToCourseAll: function() {
				if (getApp().globalData.userInfo.openId != '') {

					uni.navigateTo({
						url: '../courseAll/courseAll'
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			junToTeacherWage: function(item){
				// console.log(item)
				if (getApp().globalData.userInfo.openId != '') {
				
					uni.navigateTo({
						url: '../teacherWage/teacherWage?info=' + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.page {
		width: 750rpx;
		/* height: 1334rpx; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		/* justify-content: center; */
	}

	/* 轮播图 */
	.carousel {
		width: 702rpx;
		/* height: 351rpx; */
		margin-top: 5rpx;
		margin-bottom: 20rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.scroll-view_H {
		margin-top: 20rpx;
		white-space: nowrap;
		width: 100%;
		height: 351rpx;
	}

	.carousel_item {
		width: 702rpx;
		height: 351rpx;
		display: inline-block;
		background-color: #FFFFFF;
		border-radius: 32rpx;
	}

	.carousel_item image {
		width: 702rpx;
		height: 351rpx;
		border-radius: 32rpx;
	}

	/* 标题 */
	.index_title {
		width: 702rpx;
		height: 45rpx;
		/* margin-top: 41rpx; */
		margin-left: auto;
		margin-right: auto;
		color: #121111;
		font-size: 45rpx;
		line-height: 45rpx;
		font-weight: 600;
		z-index: 999;
	}

	/* 每日一推 */
	.list {
		width: 702rpx;
		/* height: 265rpx; */
		/* margin-top: 41rpx; */
		margin-left: auto;
		margin-right: auto;
		/* background-color: #FFFFFF; */
	}

	.list_item {
		width: 210rpx;
		height: 297rpx;
		margin-right: 17rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		display: inline-block;
		user-select: none;
	}

	.list_head {
		width: 210rpx;
		height: 297rpx;
		border-radius: 15rpx 15rpx 0 0;
	}

	.list_head image {
		width: 210rpx;
		height: 297rpx;
		/* height: 265rpx; */
		/* border-radius: 15rpx 15rpx 0 0; */
		border-radius: 15rpx;
	}

	.list_content {
		width: 197rpx;
		height: 110rpx;
		font-size: 19rpx;
		text-align: center;
		color: #334856;
	}

	.list_logo {
		/* z-index: 999; */
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-top: -32rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		box-shadow: 0 3px 6px rgba(66, 89, 101, 0.16);
		background-image: url(../../static/surf.png);
	}

	.list_logo image {
		/* z-index: 1009; */
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	/* 附近的机构 */
	.institutionList {
		width: 702rpx;
		height: 353rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 20px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .09);
	}

	.institution_title {
		width: 100%;
		height: 40rpx;
		font-size: 35rpx;
		line-height: 40rpx;
		font-weight: 800;
	}

	.institution_logo {
		width: 144rpx;
		height: 260rpx;
		float: left;
		/* background-color: #007AFF; */
	}

	.institution_logo image {
		width: 144rpx;
		height: 144rpx;
		margin-top: 10rpx;
		border-radius: 50%;
	}

	.institution_info {
		width: 516rpx;
		height: 260rpx;
		float: left;
		font-size: 24rpx;
		padding: 20rpx;
		box-sizing: border-box;
		/* background-color: #0000FF; */
	}

	.institution_content {
		width: 476rpx;
		height: 120rpx;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #666666;
		/* 多行显示+超出部分省略号替代 */
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.institution_more {
		width: 476rpx;
		height: 100rpx;
		color: #999999;
		/* background-color: #0000FF; */
	}

	.more {
		font-size: 20rpx;
		color: #898A8F;
		user-select: none;
	}

	.addButton {
		float: right;
		background-color: #FD973F !important;
		border-radius: 20px;
		color: #FFFFFF !important;
	}

	.button-hover {
		background-color: rgba(0, 0, 0, 0.1) !important;
		opacity: 0.7;
	}



	.bills {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: row;
		background-color: #fff;
	}

	.bill_select {
		width: 240rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		/* border-radius: 10rpx; */
		background-color: #fff;
	}

	.bill_logo image {
		width: 82rpx;
		height: 77rpx;
		/* padding-left: 40rpx; */
	}

	.bill_info {
		width: 115rpx;
		height: 77rpx;
		float: left;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		margin-left: 5rpx;
		padding: 5rpx;
		box-sizing: border-box;
	}

	.calendar {
		width: 750rpx;
		background-color: #FFFFFF;
	}

	.calendar chenmushan-week-calendar {
		width: 750rpx;
		background-color: #FFFFFF;
	}

	.course_select {
		/* width: 220rpx; */
		padding: 10rpx;
		margin-top: 10rpx;
		margin-left: 0rpx;
		margin-right: 15rpx;
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
		border-radius: 5px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, .09);
	}

	.course_logo image {
		width: 210rpx;
		height: 297rpx;
		padding: 0rpx;
		margin-top: 0rpx;
		margin-left: 0rpx;
		margin-right: auto;
		margin-bottom: 5rpx;
		border-radius: 3px;
	}

	.title {
		width: 700rpx;
		height: 45rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		margin-left: 35rpx;
		margin-right: auto;
		color: #222222;
		font-size: 40rpx;
		line-height: 45rpx;
		font-weight: 400;
	}

	.teacher_select {
		width: 135rpx;
		/* height: 147rpx; */
		padding: 10rpx;
		margin-top: 40rpx;
		margin-left: 0rpx;
		margin-right: auto;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 0 9px 28px rgba(0, 0, 0, .09);
	}

	.teacher_logo image {
		width: 72rpx;
		height: 72rpx;
		margin-top: -50rpx;
		margin-left: 30rpx;
		border-radius: 50%;
	}

	.teacher_info {
		width: 120rpx;
		height: 65rpx;
		float: left;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		margin-left: 10rpx;
		margin-top: 5rpx;
		padding: 0rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.teacher_evaluate image {
		width: 115rpx;
		height: 19rpx;
		margin-left: 14rpx;
		margin-bottom: 0rpx;
	}
	
	.new_bills{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		margin: 10rpx 35rpx;
		margin-top: 30rpx;
	}
	
	.new_bill_select{
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 40rpx 60rpx;
		width: 30%;
		align-items: center;
		border-radius: 24rpx;
	}
	
	.new_bill_info{
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		margin-left: 10rpx;
		box-sizing: border-box;
	}
</style>
